import React from 'react';
class TimeSlice extends React.Component {
    state = { list: [] }
    handleClick = ()=>{
        this.startTime = Date.now();
       this.startTask(30020);
    }
    startTask = (amount)=>{
        //1.定义一个函数：这个函数将在下一次重绘之前被浏览器调用
        //2.注册这个函数：使用window.requestAnimationFrame()将这个函数注册到浏览器。
        //requestIdleCallback 当浏览器空闲没事干的时候，如果浏览很忙，根本就不执行
        //requestAnimationFrame 下次重绘前执行，肯定会执行
        requestAnimationFrame(()=>{
            let batch = amount>=100?100:amount;
            amount -= batch;
            //3.在函数中更新动画：你可以在这个函数中更新动画的状态。一次更新100条
            this.setState({
                list:[...this.state.list,...new Array(batch).fill(0)]
            },()=>{
                //等更新完成后，如果还有剩下的任务则继续执行
                if(amount>0){
                    //4.再次注册：如果你的动画还没有完成，可以在函数的末尾再次注册这个函数
                    this.startTask(amount);
                }else{
                    console.log((Date.now()- this.startTime)/1000)
                }
            });
        });
    }
    render() {
        return (
            <>
                <button onClick={this.handleClick}>点击</button>
                <input/>
                <ul>
                    {
                        this.state.list.map((item,index)=>(
                            <li key={index}>{index}</li>
                        ))
                    }
                </ul>
            </>
        )
    }
}
export default TimeSlice;
